<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/scene_workbench.css">
</head>

<body>
    <div class="scene_workbench">
        <div class="sidebar panel panel-default">
            <div class="panel-heading">已采条码</div>
            <div class="panel-body no-padding">
                <!-- 已采条码 -->
                <table class="table">
                    <thead>
                        <th>条码号</th>
                        <th>姓名</th>
                        <th>样本类型</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1000001</td>
                            <td>张三</td>
                            <td>咽拭子</td>
                        </tr>
                        <tr>
                            <td>1000001</td>
                            <td>张三</td>
                            <td>咽拭子</td>
                        </tr>
                        <tr>
                            <td>1000001</td>
                            <td>张三</td>
                            <td>咽拭子</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="main">
            <form action="" class="form-horizontal">
                <!-- 筛查批次 -->
                <div class="panel panel-default">
                    <div class="panel-heading">筛查批次</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="barcode" class="col-sm-2 control-label">个人码</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="barcode" placeholder="通过扫个人码或者输入身份证定位">
                            </div>
                            <div class="col-sm-2">
                                <button class="btn btn-primary" type="button" id="btn-find"><span class="glyphicon glyphicon-search"></span> 查询</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="batchId" class="col-sm-2 control-label">筛查批次</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="batchId">
                                    <option value="1">第1批</option>
                                    <option value="2">第2批</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="batchEnterprise" class="col-sm-2 control-label">复工单位</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="enterprise" value="迪安诊断" readonly>
                            </div>
                        </div>

                        <!-- 错误信息 -->
                        <!-- 该人员不是名单导入人员，请核对他的单位信息和筛查批次 -->

                    </div>
                </div>

                <!-- 基本信息 -->
                <div class="panel panel-default">
                    <div class="panel-heading">基本信息</div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-sm-6">
                                <!-- 如果是二维码 加上class has-warning和has-feedback -->
                                <div class="form-group has-warning has-feedback">
                                    <label for="dataFrom" class="col-sm-4 control-label">数据来源</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="dataFrom" value="二维码" readonly>
                                        <!-- 如果是二维码 显示下面的警示图标 -->
                                        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                                    </div>
                                </div>

                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="cardNum" class="col-sm-4 control-label">证件号</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="cardNum" value="330184199605465549" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="name" class="col-sm-4 control-label">姓名</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="name" value="张三" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="sex" class="col-sm-4 control-label">性别</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="sex" value="男" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="age" class="col-sm-4 control-label">年龄</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="age" value="33" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="mobile" class="col-sm-4 control-label">联系电话</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="mobile" value="13078989988" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="patientEnterprise" class="col-sm-2 control-label">单位</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="patientEnterprise" value="杭州迪安">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="isSick" class="col-sm-4 control-label">是否有症状</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="isSick">
                                            <option value="0">无</option>
                                            <option value="1">有</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="isTouch" class="col-sm-4 control-label">14天接触史</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="isTouch">
                                            <option value="0">无</option>
                                            <option value="1">有</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="heart" class="col-sm-2 control-label">体温</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="heart" value="37.5">
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 条码信息 -->
                <div class="panel panel-default">
                    <div class="panel-heading with-btn">
                        <div class="row no-gutter">
                            <div class="col-sm-6">
                                条码信息
                            </div>
                            <div class="col-sm-6 text-right">
                                <button class="btn btn-default" type="button" id="btn-general-check">开启普检</button>
                                <button class="btn btn-default" type="button" id="btn-mixed-check">开启混检</button>
                            </div>
                        </div>

                    </div>
                    <div class="panel-body no-padding">

                        <div class="checks">
                            <!-- 混检 -->
                            <div class="mixed-check check">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group">
                                            <label for="startIdMixed" class="col-sm-5 control-label">当前起始条码</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control startId" id="startIdMixed" value="100001">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="patSum" class="col-sm-4 control-label">混检人数</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="patSum" value="5">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <button class="btn btn-primary btn-lock" type="button">锁定条码</button>
                                        <button class="btn btn-primary btn-jump" type="button">跳码</button>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        当前人数：<span class="text-danger">1人</span>
                                    </div>
                                    <div class="col-sm-6 text-right">
                                        <button class="btn btn-success btn-add" type="button" id="btn-add"><span class="glyphicon glyphicon-plus"></span> 添加项目</button>
                                    </div>
                                </div>

                                <table class="table table-bordered">
                                    <thead>
                                        <th>条码号</th>
                                        <th>项目编号</th>
                                        <th>项目名称</th>
                                        <th>样本类型</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>100004</td>
                                            <td>300244</td>
                                            <td>noc新冠筛查</td>
                                            <td>咽拭子</td>
                                        </tr>

                                        <tr>
                                            <td>100004</td>
                                            <td>300244</td>
                                            <td>noc新冠筛查</td>
                                            <td>咽拭子</td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>

                            <!-- 普检 -->
                            <div class="general-check check">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group">
                                            <label for="startIdGeneral" class="col-sm-5 control-label">当前起始条码</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control startId" id="startIdGeneral" value="200005">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <button class="btn btn-primary btn-lock" type="button">锁定条码</button>
                                        <button class="btn btn-primary btn-jump" type="button">跳码</button>
                                    </div>
                                </div>

                                <div class="text-right bs-padding-lr-30">
                                    <button class="btn btn-success btn-add" type="button" id="btn-add"><span class="glyphicon glyphicon-plus"></span> 添加项目</button>
                                </div>

                                <table class="table table-bordered">
                                    <thead>
                                        <th>条码号</th>
                                        <th>项目编号</th>
                                        <th>项目名称</th>
                                        <th>样本类型</th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>200004</td>
                                            <td>135</td>
                                            <td>noc新冠筛查</td>
                                            <td>咽拭子</td>
                                        </tr>

                                        <tr>
                                            <td>200004</td>
                                            <td>136</td>
                                            <td>noc新冠筛查</td>
                                            <td>咽拭子</td>
                                        </tr>

                                        <tr>
                                            <td>200005</td>
                                            <td>137</td>
                                            <td>noc新冠筛查</td>
                                            <td>血清</td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>


                        <div class="text-center">
                            <!-- 采样完成和重置按钮 -->
                            <button class="btn btn-primary" type="button" id="btn-finish">采样完成</button>
                            <button class="btn btn-default" type="button" id="btn-reset">重置</button>
                        </div>

                    </div>
                </div>

            </form>
        </div>
    </div>
</body>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/openTab.js"></script>
<script>
    $(document).ready(function () {

        //普检、混检开关通用函数
        function onOff(btn, target) {
                $("body").on("click", btn, function () {
                    if ($(this).hasClass("btn-success")) {
                        //隐藏普检
                        $(target).hide();
                        $(this).removeClass("btn-success").addClass("btn-primary")
                    } else {
                        $(target).show();
                        $(this).removeClass("btn-primary").addClass("btn-success")
                    }
                })
            }
            //普检切换
        onOff("#btn-general-check", ".general-check");

        //混检切换
        onOff("#btn-mixed-check", ".mixed-check");


        //锁定条码切换事件 
        $("body").on("click", ".btn-lock", function () {
            if ($(this).hasClass("btn-success")) {
                //设置起始条码可编辑
                $(this).parents(".row").find("input.startId").removeAttr("readonly");
                $(this).removeClass("btn-success").addClass("btn-primary")
            } else {
                //设置起始条码不可编辑
                $(this).parents(".row").find("input.startId").attr("readonly", "readonly");
                $(this).removeClass("btn-primary").addClass("btn-success")
            }

        })

        //跳码 该元素先被隐藏 所以事件绑定在body上
        $("body").on("click", ".btn-jump", function () {
            let input_dom = $(this).parents(".row").find("input.startId");
            //未锁定的条码才能跳码？
            if (!input_dom.attr("readonly") == true) {
                let input_val = input_dom.val();
                //转换为整数后+1
                input_val = parseInt(input_val) + 1;
                input_dom.val(input_val)
            } else {

            }
        })

    });
</script>

</html>